<template>
  <datagrid-card id="historyDg">
    <template #toolbar>
      <div class="toolbar-wrapper">
        <el-menu mode="horizontal" defaultActive="1" class="dg-view-menu">
          <el-menu-item index="1">
            <el-icon>
              <platform/>
            </el-icon>
            {{ $t('mes.historicalData') }} <el-tag class="m-ml-10" type="warning" effect="plain"> {{ productionLineCode || '-' }}</el-tag>
          </el-menu-item>
        </el-menu>
        <div class="menu-right">
          <el-form :inline="true" :model="formData" label-width="140px">
            <el-form-item :label="$t('mes.trayNumber')">
              <el-input v-model="formData.barCode" :placeholder="$t('wms.pleaseEnter')" style="width: 120px"></el-input>
            </el-form-item>
            <el-form-item :label="$t('mes.locationOfHealth')">
              <el-input v-model="formData.location" :placeholder="$t('wms.pleaseEnter')"
                        style="width: 130px"></el-input>
            </el-form-item>
            <el-form-item :label="$t('mes.whetherToEnd')" label-width="auto">
              <el-select v-model="formData.isover" clearable :placeholder="$t('wms.select')"
                         style="width: 130px;font-size:12px">
                <el-option
                  v-for="item in yesOrNo"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">
                <el-icon>
                  <search/>
                </el-icon>
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </template>
    <template #default>
      <el-table height="100%"
                :data="data.rows"
                header-align="center"
                stripe
                :fit="true"
                border
                :header-cell-style="{color:'#000',textAlign:'center'}"
                :cell-style="{textAlign: 'center'}"
                style="width: 100%;">
        <el-table-column
          prop="lineNo"
          :label="$t('mes.healthZoneLine')"
          width="120">
          <template #default="scope">
            <el-tag>{{ scope.row.lineNo }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="location"
          :label="$t('mes.locationOfHealth')"
          width="120">
          <template #default="scope">
            <el-tag>{{ scope.row.location }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="cartonNo"
          :label="$t('mes.trayNumber')"
          width="120">
          <template #default="scope">
            {{ scope.row.cartonNo ? scope.row.cartonNo : "--" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="materialCode"
          :label="$t('wms.materialCode')"
          width="120">
          <template #default="scope">
            {{ scope.row.cartonNo ? scope.row.materialCode : "--" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="materialSpec"
          :label="$t('wms.materialSpce')"
          width="200">
          <template #default="scope">
            {{ scope.row.cartonNo ? scope.row.materialSpec : "--" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="weighQty"
          :label="$t('mes.totalNumberOf')"
          width="120">
          <template #default="scope">
            <el-tag effect="plain">{{ scope.row.cartonNo ? scope.row.weighQty : "--" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="outputTime"
          :label="$t('mes.outputTime')"
          width="">
          <template #default="scope">
            {{ scope.row.cartonNo ? scope.row.outputTime : "--" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="restendTime"
          :label="$t('mes.endTimeOf')"
          width="">
          <template #default="scope">
            {{ scope.row.cartonNo ? scope.row.restendTime : "--" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="isover"
          :label="$t('mes.whetherToEnd')"
          width="120">
          <template #default="scope">
            <el-tag effect="dark"
                    :type="(scope.row.isover == '是'|| scope.row.isover == 'Yes'|| scope.row.isover == 'yes' )? 'success' : 'danger'">
              {{
                scope.row.cartonNo ? scope.row.isover : "--"
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="qcResult"
          :label="$t('mes.qtyInspectionStatus')" width="100">
          <template #default="scope">
            <el-tag effect="dark" :type="scope.row.qcResult == 'OK'? 'success' : 'danger'">{{
                scope.row.cartonNo ? scope.row.qcResult : "--"
              }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </datagrid-card>
</template>

<script>
import datagridCard from '@/components/common/datagridCard'

export default {
  name: 'historyDataDg',
  components: { datagridCard },
  inject: ['productionLineCode'],
  props: {
    data: {
      type: Object,
      default: () => {
        return {
          pages: 1,
          rows: [],
          total: 0
        }
      }
    },
    queryParams: {
      type: Object
    },
    loading: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data () {
    return {
      formData: {
        isover: '',
        barCode: '',
        location: ''
      },
      yesOrNo: [
        {
          label: this.$t('mes.all'),
          value: ''
        },
        {
          label: this.$t('wms.yes'),
          value: 'yes'
        },
        {
          label: this.$t('wms.no'),
          value: 'no'
        }
      ]
    }
  },
  methods: {
    onSubmit () {
      this.$emit('search', { ...this.formData })
    }
  }
}
</script>

<style lang="scss" scoped>
#historyDg {
  .toolbar-wrapper {
    position: relative;

    .dg-view-menu {
      width: 100%;
    }

    .menu-right {
      position: absolute;
      top: 10px;
      right: 20px;
      height: 50px;
      display: flex;

      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
